<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
    <style>
        div {
            position: absolute;
            background: #ff9900;
            width: 100px;
            height: 100px;
        }

        svg {
            position: absolute;
            z-index: 1;
        }
    </style>
</head>
<body>
<div style="left: 0px; top:0px;" class="div-1-1">1-1</div>
<div style="left: 0px; top:200px;" class="div-1-2">1-2</div>
<div style="left: 0px; top:400px;" class="div-1-3">1-3</div>
<div style="left: 0px; top:600px;" class="div-1-4">1-4</div>

<div style="left: 400px; top:100px;" class="div-2-1 div-2-2">2-1-2</div>
<div style="left: 400px; top:300px;" class="div-2-3 div-2-4">2-3-4</div>

<div style="left: 800px; top:200px;" class="div-3-1 div-3-3">3-1-3</div>
<div style="left: 800px; top:400px;" class="div-3-2 div-3-4">3-2-4</div>
<script src="js/jquery.min.js"></script>
<script>
    function test(leftDiv, rightDiv, bold = 3, color = '#000000') {
        var leftDivX = leftDiv.offset().left;
        var leftDivY = leftDiv.offset().top;
        var leftDivH = leftDiv.height();
        var leftDivW = leftDiv.width();

        var rightDivX = rightDiv.offset().left;
        var rightDivY = rightDiv.offset().top;
        var rightDivH = rightDiv.height();

        var bodyX = $('body').offset().left;
        var bodyY = $('body').offset().top;

        var leftDivStartX = leftDivX + leftDivW - bodyX;
        var leftDivStartY = leftDivY + (leftDivH / 2) - bodyY;

        var leftDivEndX = rightDivX - bodyX;
        var leftDivEndY = rightDivY + (rightDivH / 2) - bodyY;

        var maxWidth = rightDivX;
        var maxHeight = (leftDivY > rightDivY ? leftDivY : rightDivY) + leftDivH / 2;

        var svg = '<svg height="' + maxHeight + '" width="' + maxWidth + '"><path d="M' + leftDivStartX + ',' + leftDivStartY + ' L' + leftDivEndX + ',' + leftDivEndY + '" stroke="' + color + '" stroke-width="' + bold + '" fill="none"/></svg>';
        $("body").append(svg);
    }
    //test($('.div-1-1'), $('.div-2-1'));
    //test($('.div-1-2'), $('.div-2-2'));
    //test($('.div-1-3'), $('.div-2-3'));
    //test($('.div-1-4'), $('.div-2-4'));
    //test($('.div-2-1'), $('.div-3-1'));
    //test($('.div-2-2'), $('.div-3-2'));
    //test($('.div-2-3'), $('.div-3-3'));
    //test($('.div-2-4'), $('.div-3-4'));
	
	drawLine($('.div-1-1'), $('.div-2-1'));
	function drawLine(startObj, endObj) {
        var html = "";
        var y_start =  Number(startObj.css("top").replace("px","")) + startObj.height()/2;
        var x_start =  Number(startObj.css("left").replace("px","")) + startObj.width();
        var y_end =  Number(endObj.css("top").replace("px","")) + endObj.height()/2;
        var x_end =  Number(endObj.css("left").replace("px",""));
        var deg = 0; 
        if (y_start == y_end) // 画横线
        {
            if (x_start > x_end) {
                var t = x_start;
                x_start = x_end;
                x_end = t
                deg = 180;
            }
            length = Math.abs(x_end - x_start);    
        } else if (x_start == x_end) // 画竖线
        {
            deg = 90;
            if (y_start > y_end) {
                var t = y_start;
                y_start = y_end;
                y_end = t
                deg = 270;
            }
            length = Math.abs(y_end - y_start);
        } else {// 画线旋转角度
            var lx = x_end - x_start;
            var ly = y_end - y_start;
            var length = Math.sqrt(lx * lx + ly * ly); //计算连线长度
            var c = 360 * Math.atan2(ly, lx) / (2 * Math.PI); //弧度值转换为角度值
            c = c <= -90 ? (360 + c) : c;  //负角转换为正角
            deg = c;
        }
        html = "<div class='rotate' style='top:" +y_start+ "px;left:" +x_start
                +"px;width:"+length+"px;transform:rotate("+deg+"deg)'>" +
                        "<i class='arrow-img'></i>"+
                        "<i class='con-img'></i></div>";
        return html;
    }
</script>
</body>
</html>